<template>
  <!-- <chart :options="options" /> -->
  <div class="ChartsDashboard" >
        <v-chart :options='options' :autoresize='true' class="full" />
  </div>
</template>

<script>

export default {
  name: 'ChartsDashboard',
  props: {
    
  },
  computed: {
    options () {
      return {
      series: [{
        type: 'gauge',
        radius:"80%",
        center: ["50%", "50%"], // 默认全局居中
        title : {               //设置仪表盘中间显示文字样式
            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontWeight: 'bolder',
                fontSize: 12,
                color:"#98D0D8"
            },
            offsetCenter: [0,"28%"],
        },

          axisLine: {
            lineStyle: {
                width: 12,
                color: [
                    [0.5, '#42E4FB'],
                    [1, '#3488DB'],
                ],
                shadowBlur: 2,             //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 
                shadowColor: "#42E4FB"
            }
        },
        splitLine: {
          show: false, 
          length: 10,
        },
        axisTick: {
          show: false,				// 是否显示刻度(线),默认 true。
          splitNumber:5,			// 分隔线之间分割的刻度数,默认 5。
          length: 8,				// 刻度线长。支持相对半径的百分比,默认 8。
          lineStyle: {			// 刻度线样式。	
            color: "#fff",				//线的颜色,默认 #eee。
            opacity: 1,					//图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
            width: 1,					//线度,默认 1。
            type: "solid",				//线的类型,默认 solid。 此外还有 dashed,dotted
            shadowBlur: 10,				//(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 
            shadowColor: "#fff",		//阴影颜色。支持的格式同color。
          }
        },
        axisLabel: {
            fontSize: 10,
            color:'#42E4FB',
            distance : 8 //文字离表盘的距离
        },
        pointer: {
          length: "50%",			// 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
	        width: 3
        },
        itemStyle: {			// 仪表盘指针样式。
          color: "#3488DB",			// 指针颜色，默认(auto)取数值所在的区间的颜色
          // opacity: 1,				// 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
          // borderWidth: 0,			// 描边线宽,默认 0。为 0 时无描边。
          // borderType: "solid",	// 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
          // borderColor: "#000",	// 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
          // shadowBlur: 10,			// (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 
          // shadowColor: "#fff",	// 阴影颜色。支持的格式同color。
	      },
        
        
        detail: {
            valueAnimation: true,
            offsetCenter: [0,"60%"],    //设置仪表盘下方显示内容位置
            formatter:'{value}%',
            color: "#98D0D8",			// 文字的颜色,默认 auto。
	          fontSize: 10,	
            textStyle:{color:'#0FEA38',fontSize:21,fontWeight:400},
        },
        data: [{
            value: 50.00,
            name: '完成率',
            itemStyle:{
              color:'#3488DB'
            },
        }],
        
    }]
      }
    },

  }
}
</script>

<style scoped lang="less">
.ChartsDashboard{
  width: 80%;
  height: 60%;
  margin: 0 auto;
}
</style>
